<template>
  <!-- 渲染数据————内容展示区 -->
  <div>
    <a-input-search
      v-model="searchDepartment"
      placeholder="查询部门"
      enter-button="Search"
      size="large"
      @search="getData"
      style="width: 400px"
    />
    <!-- 考勤组信息展示 -->
    <tr class="department">
      <td>部门ID</td>
      <td>名称</td>
      <td>是否开启考勤</td>
      <td>部门负责人</td>
      <td>修改负责人</td>
      <td>修改推送群聊</td>
      <td>是否开启考勤周报</td>
    </tr>
    <!-- 内容展示 -->
    <div class="column">
      <tr class="group content" v-for="(item, index) in allDepList.list" :key="index">
        <td>{{ item.dept_id }}</td>
        <td class="name_de">{{ item.name }}</td>
        <td>
          <a-switch
            :checked="item.is_robot_attendance"
            @change="onChange(index)"
            active-value="1"
            inactive-value="0"
          />
        </td>
        <!-- 部门负责人 principal 负责人-->
        <div class="principal">
          <td v-for="(item, index) in item.ResponsibleUsers" :key="index">{{ item.name }}</td>
        </div>
        <td>
          <!-- 修改负责人 -->
          <a-button type="primary" @click="showModalChange(index)">
            修改
            <a-modal v-model="visiblePer" title="修改负责人" @ok="handleOkChange">
              
              <!-- 这里是修改负责人 -->
              <a-form-item label="修改负责人" v-if="isShow">
                <a-select
                  mode="tags"
                  placeholder="请输入名字"
                  @search=" inputChange"
                  style="width: 170px"
                  v-model="setPer.old_user_id"
                >
                  <a-select-option v-for="i in userName" :key="i"  :value="i">
                    {{i}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-modal>
          </a-button>
        </td>
        <!-- 推送至 选择人/组之后进行推送 -->
        <td class="but1">
          <a-button type="danger" @click="showModalPush(index)">
            修改群
            <a-modal
              title="推送到群"
              :visible="visiblePush"
              @ok="handleOkPush"
              @cancel="handleCancelPush"
              style="width: 170px"
              label="token"
            >
              <div style="margin-bottom: 35px">
                <span style="float: left; height: 34px; width: 50px; line-height: 34px">
                  token:
                </span>
                <a-input
                  placeholder="请输入对应群的token"
                  style="width: calc(100% - 50px); resize: none; height: 34px; float: left"
                  v-model="tokenPush"
                />
              </div>
            </a-modal>
          </a-button>
        </td>
        <!-- 是否开启考勤周报 -->
        <td>
          <a-switch
            :checked="item.is_attendance_week_paper"
            @change="weekChange(index)"
            active-value="1"
            inactive-value="0"
          />
        </td>
      </tr>
    </div>

    <!-- 分页区域 -->
    <!-- 分页器 -->
    <div v-if="isShowPage" class="bottom">
      <a-pagination v-model="page" :total="allDepList.total" show-less-items @change="sizeChange" />
    </div>
  </div>
</template>
<script>
// 引入接口
import {
  reqgetDeptListFromMysql,
  requpdateDept,
  getPersonName
} from "@/api";
import { Pagination } from "ant-design-vue";
import {_debounce} from '@/utils/fangdou';
export default {
  name: "department",
  components: {
    "a-pagination": Pagination,
  },
  inject: ["reload"], //注入依赖  所提供的数据不是响应式的
  data() {
    return {
      // confirmLoading: false,   // 是否为OK 按钮应用加载视觉效果
      searchDepartment: "",
      isShow: true,
      loading: false,
      tokenPush:'',
      visiblePush: false,
      visiblePer: false,
      //当没有数据的时候
      isShowPage: true,
      // 这里需要改
      allDepList: [], //这里是自己定义的数组用来接收数据的
  
      page: 1, // 当前的页数，
      pageSize: 10,
      // 这里是自己后面表单里面添加的
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      // mobile: [],
      name: "",
      // 这个是用来接收模糊查询数据的
      dataSource: [],
      // 这个是接收所有群数据的数组
      allUsermsg: [],
      //  这三个 是进行设置或取消部门负责人的时候需要传入的参数 【问: 这里需要写吗？？】
      //  changeName: '',
      userName:[ ],
      setPer: {
        dept_id: 0,
        old_user_id: [],
      },
      perIndex: 0, // 这里是定义的部门负责人的下标
      status: "0",
      changeDepart: {
        dept_id: 0,
        is_send_first_person: 0,
        robot_token: "",
        is_attendance_week_paper:true,
        is_robot_attendance: false,
        is_jianshu_or_blog: 0,
        is_leet_code: 0,
        ResponsibleUserIds: [],
      },
    };
  },
  mounted() {
    this.getData();
    const token1 = localStorage.getItem("token");
    console.log(token1);
    if (token1 === "undefined") {
      this.isShowPage = false;
    }
  },
  methods: {
    getData() {
      //  网络请求 promise  封装  await async
      reqgetDeptListFromMysql(this.page, this.pageSize, this.searchDepartment).then(res => {
        this.allDepList = res.data;
      });
    },
    // 模糊查询
    handleChange(value) {
      // value即为输入框的值
      console.log(value);
      this.setPer.old_user_id = value;
      console.log(this.setPer.old_user_id);
    },
    // 开关切换
    onChange(index) {
      this.changeDepart.dept_id = this.allDepList.list[index].dept_id;
      this.changeDepart.is_send_first_person = this.allDepList.list[index].is_send_first_person;
      this.changeDepart.robot_token = this.allDepList.list[index].robot_token;
      this.changeDepart.is_robot_attendance =! this.allDepList.list[index].is_robot_attendance;
      this.changeDepart.is_attendance_week_paper=this.allDepList.list[index].is_attendance_week_paper;
      this.changeDepart.is_jianshu_or_blog = this.allDepList.list[index].is_jianshu_or_blog;
      this.changeDepart.is_leet_code = this.allDepList.list[index].is_leet_code;
      if(this.allDepList.list[index].ResponsibleUsers!=null){
      this.changeDepart.ResponsibleUserIds = this.allDepList.list[index].ResponsibleUsers.map(
        user => {
          return user.userid;
        }
      )}else{
        this.changeDepart.ResponsibleUserIds=null;
      }
      console.log(this.allDepList.list[index]);
      requpdateDept(this.changeDepart).then(res => {
        if (res.code == 0) {
          this.allDepList.list[index].is_robot_attendance=!this.allDepList.list[index].is_robot_attendance;
        }
        this.getData();
      });
    },
        // 开启考勤周报
        weekChange(index) {
      this.changeDepart.dept_id = this.allDepList.list[index].dept_id;
      this.changeDepart.is_send_first_person = this.allDepList.list[index].is_send_first_person;
      this.changeDepart.robot_token = this.allDepList.list[index].robot_token;
      this.changeDepart.is_robot_attendance = this.allDepList.list[index].is_robot_attendance;
      this.changeDepart.is_attendance_week_paper=!this.allDepList.list[index].is_attendance_week_paper;
      this.changeDepart.is_jianshu_or_blog = this.allDepList.list[index].is_jianshu_or_blog;
      this.changeDepart.is_leet_code = this.allDepList.list[index].is_leet_code;
      if(this.allDepList.list[index].ResponsibleUsers!=null){
      this.changeDepart.ResponsibleUserIds = this.allDepList.list[index].ResponsibleUsers.map(
        user => {
          return user.userid;
        }
      )}else{
        this.changeDepart.ResponsibleUserIds=null;
      }
      console.log(this.allDepList.list[index]);
      requpdateDept(this.changeDepart).then(res => {
        if (res.code == 0) {
          this.allDepList.list[index].is_attendance_week_paper =
            !this.allDepList.list[index].is_attendance_week_paper;
        }
        this.getData();
      });
    },
    // input值改变时触发
    inputChange:function () {
      console.log(this.setPer.old_user_id);
      getPersonName(this.setPer.old_user_id.slice(this.setPer.old_user_id.length-1,this.setPer.old_user_id.length)).then(res => {
        this.userName = res.data.list.map(user => {
          return user.name;
          
        });
        console.log(this.userName);
      });
  
    },
    
    // 这里是后面表单里面的内容
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
  // 分页
    sizeChange(val) {
      this.page = val;
      reqgetDeptListFromMysql(this.page, this.pageSize, this.searchDepartment).then(res => {
        this.allDepList = res.data;
        console.log(this.allDepList);
      });
      // }
    },
    //修改负责人
    showModalChange(index) {
      this.visiblePer = true;
      this.setPer.dept_id = this.allDepList.list[index].dept_id;
      if(this.allDepList.list[index].ResponsibleUsers!=null){
      this.setPer.old_user_id= this.allDepList.list[index].ResponsibleUsers.map( user => {
          return user.name;
        }
      )}
      this.changeDepart.is_attendance_week_paper=this.allDepList.list[index].is_attendance_week_paper;
      this.changeDepart.dept_id = this.allDepList.list[index].dept_id;
      this.changeDepart.is_send_first_person = this.allDepList.list[index].is_send_first_person;
      this.changeDepart.robot_token = this.allDepList.list[index].robot_token;
      this.changeDepart.is_robot_attendance = this.allDepList.list[index].is_robot_attendance;
      this.changeDepart.is_jianshu_or_blog = this.allDepList.list[index].is_jianshu_or_blog;
      this.changeDepart.is_leet_code = this.allDepList.list[index].is_leet_code;
    },
    //  这里当点击Ok 之后调用接口 发送数据
    handleOkChange() {
      this.changeDepart.ResponsibleUserIds=this.setPer.old_user_id;
      console.log(this.changeDepart);
      requpdateDept(this.changeDepart).then(res => {
      });
      this.$message.success("修改成功");
      this.getData();
      this.visiblePer = false;
    },
    // 这里是推送事件
    showModalPush(index) {
      this.visiblePush = true;
      this.changeDepart.is_attendance_week_paper=this.allDepList.list[index].is_attendance_week_paper;
      this.tokenPush=this.allDepList.list[index].robot_token;
      this.changeDepart.dept_id = this.allDepList.list[index].dept_id;
      this.changeDepart.is_send_first_person = this.allDepList.list[index].is_send_first_person;
      this.changeDepart.is_robot_attendance = this.allDepList.list[index].is_robot_attendance;
      this.changeDepart.is_jianshu_or_blog = this.allDepList.list[index].is_jianshu_or_blog;
      this.changeDepart.is_leet_code = this.allDepList.list[index].is_leet_code;
      if(this.allDepList.list[index].ResponsibleUsers!=null){
      this.changeDepart.ResponsibleUserIds = this.allDepList.list[index].ResponsibleUsers.map(
        user => {
          return user.userid;
        }
      )}else{
        this.changeDepart.ResponsibleUserIds=null;
      }
    },
    //确认推送
    handleOkPush(e) {
      this.changeDepart.robot_token = this.tokenPush;
      console.log(this.changeDepart.robot_token);
      requpdateDept(this.changeDepart).then(res => {
      });   
      this.$message.success("成功推送到群");
      this.visiblePush = false;
      this.getData();
    },
    // 取消 推送到人
    handleCancelPush(e) {
      this.visiblePush = false;
    },
  },
  // 深度监听
  // watch: {
  // name: {
  //     immediate: true,  //  初始化的时候让hander 调用一下
  //     // 函数当name发生改变的时候进行调用
  //     handler(newValue, oldValue) {
  //         console.log('name被修改了', newValue, oldValue);
  //         this.changeName(newValue)
  //     }
  // },
  // }
};
</script>

<style scoped>
.department {
  display: flex;
  /*  // 平分剩余空间 */
  justify-content: space-around;
  margin-top: 10px;
  height: 80px;
  line-height: 80px;
  background-color: #eaf4fe;
  width: 100%;
}

.department td {
  width: 250px;
  text-align: center;
}
.column {
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.column .content .principal {
  width: 190px;
  height: 50px;
  overflow: hidden;
}

.content {
  display: flex;
  justify-content: space-around;
}

.content td {
  width: 200px;
  text-align: center;
  padding-top: 13px;
}

/* .content td:nth-of-type(2) {
    overflow: hidden;
    width: 140px !important;

} */

.content:hover {
  background-color: #eaf4fe;
}

.group .but1 {
  display: flex;
  flex-wrap: wrap;
}

.but1 button {
  margin-left: 10px;
}

.ant-pagination {
  width: 300px;
  padding-top: 20px;
  margin: 0 auto;
}
</style>

<!-- provide 选项允许我们指定我们想要提供给后代组件的数据/方法。
然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性： -->
